import React, { Component } from "react";

class Createref extends Component {
	// 1 创建  ref  容器对象
	username = React.createRef();
	div = React.createRef();

	//获取数据
	getData = () => {
		console.log(this);
		//获取input   value
		let value = this.username.current.value;
		//显示到div
		this.div.current.innerHTML = value;
	};

	render() {
		return (
			<>
				<h1>createRef()创建的[ref]:获取真实dom对象</h1>
				{/* 当执行此行代码时:将 当前的 input对象 作为参数传递给回调函数,将dom对象赋值给当前实力对象的一个属性 */}
				<input type="text" ref={this.username} />

				<button onClick={this.getData}>显示数据</button>

				<div
					ref={this.div}
					style={{
						width: "300px",
						height: "300px",
						border: "1px solid grey",
						wordBreak: "break-all",
					}}
				></div>
			</>
		);
	}
}

export default Createref;
